import { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [msg] = useState('hello React');
  // setMsg
  // 更新的时候，这两个useEffect都会触发
  // useEffect(() => {
  //   console.log(count);
  // });
  // useEffect(() => {
  //   console.log(msg);
  // });

  // 以通过将依赖项数组指定为调用的第二个参数来告诉 React 跳过不必要的重新运行 Effect,只有对应依赖项发生改变的才会触发
  // 内部是通过 Object.is() 来判定是否改变
  // ✔
  useEffect(() => {
    console.log(count);
  }, [count]);
  // ✖ -> eslint会报警告的
  // useEffect(() => {
  //   console.log(count);
  // }, []); // React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

  useEffect(() => {
    console.log(msg);
  }, [msg]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      hello App
      <button onClick={handleClick}>点击</button>
      {count}, {msg}
    </div>
  );
}

export default App;
